{extend name="layout:base" /}
{block name="page_style"}
  <meta name="baidu-site-verification" content="VnnazwXWhz" />
  <meta name="sogou_site_verification" content="e9m3vzj2Dl"/>
  <link href="{$site_root}/static/plugins/swiper2/idangerous.swiper2.7.6.css" rel="stylesheet">
{/block}
{block name="main_content"}
  {notempty name="home_banners"}
    <div class="row">
      <div class="col-xs-12 pdlr-0">
        <span class="arrow-left glyphicon glyphicon-chevron-left"></span>
        <span class="arrow-right glyphicon glyphicon-chevron-right"></span>
        <div class="swiper-kv swiper-container">
          <div class="swiper-wrapper">
            {volist name="home_banners" id="vo"}
              <div class="swiper-slide" >
                <a href="{$vo.link_url}" target="{$vo.target}">
                  <img class="img-responsive" src="{$vo.wap_cover_path}">
                </a>
              </div>
            {/volist}
          </div>
          <div class="pagination hidden-xs"></div>
        </div>
      </div>
    </div>
  {/notempty}
  <div class="row">
    <div class="col-xs-12">
      <fieldset class="box-title"> 
        <legend align="center">造物者</legend>
      </fieldset>
      <div class="row">
        {volist name="top_users" id="vo"}
          <div class="col-xs-3 col-sm-2 col-lg-1 login-user clearfix">
            <a href="{:url('note/index', ['user_id' => $vo.id])}">
              <img class="img-circle" style="width:100%;" src="{$vo.avatar|show_user_avatar_url=###}" alt="{$vo.nickname}">
            </a>
            <div class="member-name text-center">
              <a class="text-center" href="{:url('note/index', ['user_id' => $vo.id])}">
                {$vo.nickname}
              </a>
            </div>
          </div>
        {/volist}
      </div>
    </div>
    {notempty name="top_notes"}
      <div class="col-xs-12">
        <fieldset class="box-title"> 
          <legend align="center">最新笔记</legend> 
        </fieldset>
        <div class="row" id="masonry-grid">
          {include file="index/note_list" /}
        </div>
        <div class="row">
          <div class="col-xs-12 text-center mb-20">
            <a class="btn btn-sm btn-theme" href="{:url('note/index')}">
              查看更多
            </a>
          </div>
        </div>
      </div>
    {/notempty}
  </div>
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/masonry/dist/masonry.pkgd.min.js"></script>
  <script src="{$site_root}/static/common/js/imagesloaded.pkgd.min.js"></script>
  <script src="{$site_root}/static/plugins/swiper2/idangerous.swiper2.7.6.min.js"></script>
  <script type="text/javascript">
    $(function(){
      var kvSwiper = $('.swiper-kv').swiper({
          autoplay: 3000,
          speed: 800,
          autoResize: true,
          resizeReInit : true,
          calculateHeight : true,
          loop : true,
          grabCursor: true,
          createPagination: true,
          paginationClickable: false,
          pagination: '.pagination',
      });
      $('.arrow-left').on('click', function(e){
        e.preventDefault()
        kvSwiper.swipePrev()
      });
      $('.arrow-right').on('click', function(e){
        e.preventDefault()
        kvSwiper.swipeNext()
      });
      var $container = $('#masonry-grid');
      $container.imagesLoaded( function () {
        $container.masonry({
          itemSelector: '.masonry-item',
          isAnimated: true
        });   
      });
    });
  </script>
{/block}